<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="直接使用剪贴板" name="directly">
        <el-input
          v-model="inputData"
          placeholder="Please input"
          style="width:400px; max-width:100%;"
        />
        <el-button
          type="primary"
          icon="el-icon-document"
          @click="handleClipboard(inputData, $event)"
        >
          复制
        </el-button>
      </el-tab-pane>
      <el-tab-pane label="使用 v-directive 指令剪贴" name="v-directive">
        <el-input
          v-model="inputData"
          placeholder="Please input"
          style="width:400px; max-width:100%;"
        />
        <el-button
          v-clipboard:copy="inputData"
          v-clipboard:success="clipboardSuccess"
          type="primary"
          icon="el-icon-document"
        >
          复制
        </el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { handleClipboard, clipboardSuccess } from "@/utils/clipboard"; // use clipboard directly

@Component({
  name: "Clipboard",
})
export default class extends Vue {
  private activeName = "directly";
  private inputData = "Lebron James";
  private clipboardSuccess = clipboardSuccess;
  private handleClipboard = handleClipboard;
}
</script>
